<template>
  <div class="component-library">
    <div class="library-header">
      <h3>组件库</h3>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索组件..."
        prefix-icon="el-icon-search"
        size="small"
        clearable
      />
    </div>
    
    <div class="library-content">
      <div 
        v-for="category in filteredCategories"
        :key="category.name"
        class="category-section"
      >
        <div class="category-header">
          <span class="category-name">{{ category.name }}</span>
          <span class="category-count">({{ category.components.length }})</span>
        </div>
        
        <div class="category-components">
          <div
            v-for="widget in category.components"
            :key="widget.type"
            class="widget-item"
            draggable="true"
            :data-widget-type="widget.type"
            @dragstart="handleWidgetDragStart(widget, $event)"
            @click="handleWidgetClick(widget)"
          >
            <div class="widget-icon">
              <i :class="getWidgetIcon(widget.type)"></i>
            </div>
            <div class="widget-info">
              <div class="widget-name">{{ widget.name }}</div>
              <div class="widget-description">{{ widget.description }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 空状态 -->
    <div v-if="filteredCategories.length === 0" class="empty-state">
      <i class="el-icon-search"></i>
      <p>没有找到匹配的组件</p>
    </div>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'

// Props
const props = defineProps({
  widgets: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits(['drag-start', 'widget-click'])

// 响应式状态
const searchKeyword = ref('')

// 计算属性
const filteredCategories = computed(() => {
  if (!searchKeyword.value) {
    return groupWidgetsByCategory(props.widgets)
  }
  
  const filteredWidgets = props.widgets.filter(widget => 
    widget.name.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
    widget.description.toLowerCase().includes(searchKeyword.value.toLowerCase()) ||
    widget.type.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
  
  return groupWidgetsByCategory(filteredWidgets)
})

// 按类别分组组件
const groupWidgetsByCategory = (widgets) => {
  const categories = {}
  
  widgets.forEach(widget => {
    const category = widget.category || '其他'
    if (!categories[category]) {
      categories[category] = []
    }
    categories[category].push(widget)
  })
  
  return Object.entries(categories).map(([name, components]) => ({
    name,
    components
  }))
}

// 获取组件图标
const getWidgetIcon = (type) => {
  const iconMap = {
    text: 'el-icon-document',
    button: 'el-icon-thumb',
    image: 'el-icon-picture',
    container: 'el-icon-folder',
    input: 'el-icon-edit',
    select: 'el-icon-arrow-down',
    table: 'el-icon-s-grid',
    form: 'el-icon-document-copy',
    chart: 'el-icon-trend-charts',
    video: 'el-icon-video-play',
    audio: 'el-icon-headphone',
    map: 'el-icon-location',
    calendar: 'el-icon-date',
    progress: 'el-icon-loading',
    slider: 'el-icon-s-operation',
    switch: 'el-icon-switch-button',
    radio: 'el-icon-circle-check',
    checkbox: 'el-icon-check',
    rate: 'el-icon-star-on',
    upload: 'el-icon-upload',
    divider: 'el-icon-minus',
    space: 'el-icon-connection'
  }
  return iconMap[type] || 'el-icon-document'
}

// 事件处理
const handleWidgetDragStart = (widget, event) => {
  // 设置拖拽数据
  event.dataTransfer.effectAllowed = 'copy'
  event.dataTransfer.setData('application/json', JSON.stringify({
    type: 'new',
    widget: widget
  }))
  
  // 触发拖拽开始事件
  emit('drag-start', widget, event)
}

const handleWidgetClick = (widget) => {
  emit('widget-click', widget)
}
</script>

<style scoped>
.component-library {
  width: 280px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.library-header {
  padding: 16px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.library-header h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.library-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.category-section {
  margin-bottom: 20px;
}

.category-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 8px;
}

.category-name {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.category-count {
  font-size: 12px;
  color: #909399;
}

.category-components {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.widget-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  background: white;
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
}

.widget-item:hover {
  border-color: #409eff;
  background: #f0f9ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.15);
}

.widget-item:active {
  cursor: grabbing;
  transform: translateY(0);
}

.widget-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f9ff;
  border-radius: 6px;
  margin-right: 12px;
  color: #409eff;
}

.widget-icon i {
  font-size: 18px;
}

.widget-info {
  flex: 1;
  min-width: 0;
}

.widget-name {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget-description {
  font-size: 12px;
  color: #909399;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #909399;
  text-align: center;
}

.empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* 滚动条样式 */
.library-content::-webkit-scrollbar {
  width: 6px;
}

.library-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.library-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.library-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 - 保持固定宽度 */
@media (max-width: 1200px) {
  .component-library {
    width: 240px; /* 保持固定宽度 */
    height: auto;
    border-right: 1px solid #e4e7ed; /* 保持右边框 */
    border-bottom: none; /* 移除底部边框 */
  }
  
  .library-content {
    max-height: none; /* 移除高度限制 */
  }
}
</style>
